<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@include file="../../include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="../../include/inhead.jsp"%>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>到店洗车</title>
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/autoinn/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/autoinn/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/autoinn/slideNav.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/autoinn/washCar.css" />
<% String o = "";
       if(request.getParameter("o")!=null){
    	   o=request.getParameter("o");
       } %>

<style type="text/css">
body {
	background-color: #f0efed;
}

.container {
	padding-left: 0px;
	padding-right: 0px;
}

.row {
	margin-left: 0px;
	margin-right: 0px;
}

.list-group-item:first-child {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

.list-group-item:last-child {
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

.active a {
	color: #EF8A55;
}

a:hover {
	color: #919191;
	text-decoration: none;
}
</style>

<style type="text/css">
.list-group-item:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.list-group-item:last-child {
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}
</style>



<script type="text/javascript"
	src="${ctx }/static/tp/bootstrap/2.3.1/js/bootstrap.min.js"></script>
	<script type="text/javascript">
	 $(function(){
		 var d =${o==null?"":o};
		 if(d!=""){
			 alert("请勿重复支付");
		 }
		 
	 });
	
	</script>
</head>

<body>

	<div class="container">


		<div class="orange-orange-a row pf text-center f14 border-1 bdc-e6e6e6 bgc-f8f8f8 pt-5 pb-5 z99 w h45 line-height-35 pr" style="left: 0; top: 0;">
				<div class="col-xs-4 line-height-35 text-left pl-15 pr-0 pt-0">
					<a class="go-back f15 pa z99 pointer co8" style="left: 15px;">
						<i class="fa f20 fa-angle-left pr-3"></i>返回
					</a>
				</div>
				<div class="col-xs-4 pr-0 pl-0 text-center">确定订单</div>
				
				
			
				
				
			</div>



		<div class="row pt-35 pb-10 pl-15 pr-15">
			<form method="post" action="${ctx }/weixin/f/autoinn/xc/userpay">
				<ul class="col-xs-12 list-group mt-20 pr-0 mb-10">
					<li class="list-group-item bdc-d0d0d0 row">
						<div class="col-md-12 pr-0 pl-0" style="color: red;">
							<p>用户须知，购买前请阅读此使用步骤：</p>
							<p>1.目前公众账号只支持微信支付</p>
							<p>2.支付前请核对信息无误在做支付</p>
						</div>
					</li>
				</ul>
				<ul class="col-xs-12 list-group mt-20 pr-0 mb-10">
					<li class="list-group-item bdc-d0d0d0 row">
						<div class="col-xs-8 pl-0">
							<div class="f16">${product.name }
								<input type="hidden" name="prid" value="${product.id }" />
							</div>
							<div class="co3 pt-5">${product.pathname }</div>
						</div>
						<div class="col-xs-4 pt-10 text-right pr-0">
							<span class="fa fa-rmb f14 co3"></span> <span
								class="f22 pl-3 fb unit-price">${product.xprice }</span> <input
								type="hidden" name="xuprice" value="${product.xprice  }" />
						</div>
					</li>

					<li class="list-group-item bdc-d0d0d0 row">
						<div class="col-xs-6 f16 pt-5 pl-0">需支付</div>
						<div class="col-xs-6 text-right pr-0">
							<span class="fa fa-rmb f14 co3"></span> <span
								class="f22 pl-3 co8 fb total-price">${product.xprice }</span>
						</div>
					</li>
				</ul>

				<ul class="col-xs-12 list-group pr-0 mb-10">
					<li class="list-group-item bdc-d0d0d0 row">
						<div class="col-xs-6 f16 pt-5 pl-0">使用优惠券</div>
						<div class="col-xs-6 text-right pr-0">
							<c:if test="${coupon==null }">
								<span>暂无</span>
							</c:if>
							<c:if test="${coupon != null }">
								<select name="juanss" class="coupon-price">
								<option value="0,0,0">请选择</option>
									<c:forEach items="${coupon }" var="l" varStatus="ids">
										<option value="${l.couponPrice },${l.couponType },${l.collarid}">
											${l.couponName }</option>
									</c:forEach>
								
								</select>
							</c:if>

						</div>
					</li>
					<li class="list-group-item bdc-d0d0d0 row">
						<div class="col-xs-6 f16 pt-5 pl-0">使用账户余额</div>
						<div class="col-xs-6 text-right pr-0 pl-0">
							<label> <input type="checkbox" class="use-balance"
								name="balance" value="${customer.surplus}" /> <span
								class="fa fa-rmb f14 co3"></span><span
								class="f22 pl-3 co8 fb balance"> <c:if
										test="${customer==null }">
								0
								</c:if> <c:if test="${customer!= null }">
								<c:if test="${customer.surplus==null }">
								 0
								</c:if>
								<c:if test="${customer.surplus!=null }">
								${customer.surplus }
								</c:if>
								
								</c:if>
							</span>
							</label>
						</div>
					</li>
				</ul>

				<ul class="col-xs-12 list-group pr-0 mb-10">
					<li class="list-group-item bdc-d0d0d0 row">
						<div class="col-xs-6 f16 pt-5 pl-0">还需支付</div>
						<div class="col-xs-6 text-right pr-0">
							<span class="fa fa-rmb f14 co3"></span> <span
								class="f22 pl-3 co8 fb need-price">0.00</span>
						</div>
					</li>
				</ul>

				<ul class="col-xs-12 list-group pr-0 mb-10">
					<li class="list-group-item bdc-d0d0d0 row pay-item">
						<div class="col-xs-3 pr-0 pl-0 text-center">
							<img class="h32" src="${ctx }/static/images/weixin.png">
						</div>
						<div class="col-xs-6 line-height-32 f16">微信支付</div>
						<div class="col-xs-3 line-height-32 text-right pr-0 pt-5">

							<input type="checkbox" value="1" class="use-balance"
								name="pay_type" checked="checked"> <input type="hidden"
								name="pay_type" />
						</div>
					</li>
					<!--  <li class="list-group-item bdc-d0d0d0 row pay-item">
						<div class="col-xs-3 pr-0 pl-0 text-center">
							<img class="h32" src="http://static.aoaoxc.com/img/zhifubao.png">
						</div>
						<div class="col-xs-6 line-height-32 f16">支付宝支付</div>
						<div class="col-xs-3 line-height-32 text-right pr-0 pt-5">
							<input type="checkbox" class="pay-type" value="1" name="pay_type">
						</div>
					</li>-->
				</ul>

				<div class="col-xs-12 pl-0 pr-0 pt-0 pb-20">
					<input type="hidden" name="pay_function" value="userPay" /> <input
						type="hidden" name="page_show_pay_fee" value=""
						id="page_show_pay_fee_id" />
						<button class="btn btn-block btn-orange btn-lg" name="b1" id="b1"  type="submit"
                                                   onclick="return  confirm('您确定支付吗(是否使用优惠券)?');">确认支付</button>
                                                 
				</div>
			</form>
		</div>




	</div>

	<script type="text/javascript"
		src="${ctx }/static/js/wxsys/jquery.placeholder.js"></script>
	<script type="text/javascript" src="${ctx }/static/js/wxsys/common.js"></script>
	<script type="text/javascript" src="${ctx }/static/js/wxsys/site.js"></script>




	<script type="text/javascript">
		$(document)
				.ready(
						function() {
							var calculatePrice = function() {
								
								var p = $('.coupon-price').length;
								if(p>0){
								
								var type = $('.coupon-price option:selected').val();
							
								var index = type.indexOf(',');
								var lasindex = type.lastIndexOf(',');
								var t = type.substring(index,lasindex).replace(',','');
							    }
								var price = 0,
								// 单价
								unitPrice = parseFloat($('.unit-price').html()),
								// 购买数量 
								//payCount = parseInt($('.pay-count').val()),
								payCount =1;
								// 总价   
								totalPrice = unitPrice * payCount,
								// 优惠券价格
								couponPrice = ($('.coupon-price').length > 0) ? parseFloat(type)
										: 0,
								// 优惠券类型
								couponType = ($('.coupon-price').length > 0) ?
                                             t:0,
								// 余额
								balance = parseFloat($('.use-balance').attr(
										'checked') ? $('.balance').html() : 0),
								// 需支付价格
								needPrice = 0;

								// 优惠类型为 减多少钱
								if (couponType == "0") {
									price = balance
											- (totalPrice - couponPrice);
								} else  if( couponType == "1"){
									//使用折扣卷
									price = balance
											- (unitPrice * (couponPrice*0.1));
								}

								if (price > 0) {
									needPrice = 0;
								} else {
									needPrice = Math.abs(price);
								}

								$('.total-price').html(totalPrice);
								$('.need-price').html($.Global.Utils.formatPrice(needPrice));

								// 如果价格为0 则隐藏支付方式
								if (needPrice <= 0) {
									$('.pay-item').hide();
								} else {
									$('.pay-item').show();
								}
								$("#page_show_pay_fee_id").val(needPrice);
							};

							// 绑定触发支付事件
							$('.pay-count').bind('change', function() {
								calculatePrice();
							});
							$('.coupon-price').bind('change', function() {
								calculatePrice();
							});
							$('.use-balance').bind('change', function() {
								calculatePrice();
							});

							// 点击整行选择支付方式
							$('.pay-item').bind( 'click',
									function() {
										$('.pay-type').attr('checked', false);
										$(this).find('.pay-type').attr('checked', true);
									});

							calculatePrice();
						});
	</script>
	<script>
		var _hmt = _hmt || [];
		(function() {
		  var hm = document.createElement("script");
		  hm.src = "//hm.baidu.com/hm.js?3987c54e2c6d6c399fa4aca3fb9a7ef9";
		  var s = document.getElementsByTagName("script")[0]; 
		  s.parentNode.insertBefore(hm, s);
		})();
		</script>
</body>
</html>
